<template>
  <page-header-wrapper :title="false">
    <a-card title="薪资总览">
      <div :style="{ color: 'orange', marginBottom: '20px' }"><a-icon type="double-right" /><a-icon type="double-right" /> 薪资说明：每个月<span :style="{ color: 'red' }">6/7号</span>出临时结果，<span :style="{ color: 'red' }">20号</span>出最终结果。如有疑问，请及时联系组长</div>
      <a-table :columns="salaryColumns" :data-source="salaryData" :pagination="false" bordered>
        <div slot="invoice" slot-scope="text" :style="{ color: 'red' }">{{ text }}</div>
        <div slot="fine" slot-scope="text" :style="{ color: 'red' }">{{ text }}</div>
        <div slot="ask_for_leave" slot-scope="text" :style="{ color: 'red' }">{{ text }}</div>
        <div slot="refund" slot-scope="text" :style="{ color: 'red' }">{{ text }}</div>
        <div slot="social_security" slot-scope="text" :style="{ color: 'red' }">{{ text }}</div>
        <div slot="total" slot-scope="text"><a>{{ text }}</a></div>
      </a-table>
      <a-popover placement="bottom" :style="{ width: '100%' }">
        <template slot="content">
          <div class="z-table-detail">
            <div class="z-detail-left">
              <div class="z-detail-tit">【加】薪资</div>
              <ul class="z-detail-ul">
                <li class="z-detail-li">
                  <div class="z-detail-subtit">全勤</div>
                  <div class="z-detail-txt"><p><i>•</i>全勤奖500元</p></div>
                </li>
                <li class="z-detail-li">
                  <div class="z-detail-subtit">业绩</div>
                  <div class="z-detail-txt"><p><i>•</i>代理费共21906元，提成点15%，业绩提成3286元</p></div>
                </li>
                <li class="z-detail-li">
                  <div class="z-detail-subtit">奖励</div>
                  <div class="z-detail-txt"><p><i>•</i>618活动，小组业绩获胜，奖励500元</p></div>
                </li>
                <li class="z-detail-li">
                  <div class="z-detail-subtit">福利 </div>
                  <div class="z-detail-txt"><p><i>•</i>组长试用期，岗位津贴500元</p><p><i>•</i>住房补贴300元</p><p><i>•</i>新人入职培训费100元（2天*50）</p></div>
                </li>
              </ul>
            </div>
            <div class="z-detail-right">
              <div class="z-detail-tit">【减】薪资</div>
              <ul class="z-detail-ul">
                <li class="z-detail-li">
                  <div class="z-detail-subtit">发票</div>
                  <div class="z-detail-txt"><p><i>•</i>合同号<a>HT20200407ZSLMLZ</a>,金额-40.25元</p><p><i> • </i>合同号<a>HT20200407ZSLGKX</a>,金额-44.12元</p></div>
                </li>
                <li class="z-detail-li">
                  <div class="z-detail-subtit">罚款</div>
                  <div class="z-detail-txt"><p><i>•</i>理由：2020-08-07早上迟到3分钟，金额-30元（证明文件<a>点击查看</a>）</p><p><i> • </i>理由：2020-08-07没带工牌，金额-20元（证明文件<a>点击查看</a>）</p></div>
                </li>
                <li class="z-detail-li">
                  <div class="z-detail-subtit">请假</div>
                  <div class="z-detail-txt"><p><i>•</i>请假时间：2020-08-12，事假，1天，金额-100元</p><p><i> • </i>请假时间：2020-08-13，年假，1天，金额0元</p></div>
                </li>
                <li class="z-detail-li">
                  <div class="z-detail-subtit">退款</div>
                  <div class="z-detail-txt"><p><i>•</i>合同号<a>HT20200407ZSLMLZ，金额-100元</a></p></div>
                </li>
                <li class="z-detail-li">
                  <div class="z-detail-subtit">社保</div>
                  <div class="z-detail-txt"><p><i>•</i>社保（五险），金额-350元</p></div>
                </li>
              </ul>
            </div>
          </div>
        </template>
        <div :style="{ textAlign: 'center',marginTop: '20px',color: '#1890ff' }">明细 <a-icon type="caret-down" /></div>
      </a-popover>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import col from '@/columns/myself'
  const salaryColumns = col.salary
  const salaryData = []
  export default {
    name: 'Salary',
    data () {
      return {
        salaryColumns,
        salaryData
      }
    },
    methods: {}
  }
</script>

<style scoped>
  .z-table-detail{display: flex;width: 100%;}
  .z-table-detail .z-detail-left{}
  .z-table-detail .z-detail-right{margin-left: 200px;}
  .z-table-detail .z-detail-tit{margin-bottom: 10px;}
  .z-table-detail .z-detail-ul{line-height: 30px;}
  .z-table-detail .z-detail-ul .z-detail-li{display: flex;}
  .z-table-detail .z-detail-ul .z-detail-li .z-detail-subtit{color: orange;white-space: nowrap;}
  .z-table-detail .z-detail-ul .z-detail-li .z-detail-txt p{white-space: nowrap;}
  .z-table-detail .z-detail-ul .z-detail-li .z-detail-txt p i{color: orange;margin: 0 5px;}
</style>
